<script setup lang="ts">
/**
 * @desc NodeExpression
 * @author DragonTeam <https://www.bpmport.com>
 * @since 2024/11/1 10:12
 */

import type { PropType } from 'vue'
import { computed } from 'vue'
import { CornerRightDown } from 'lucide-vue-next'
import type { BaseNode, ExpressionNode } from '@/types'

defineOptions({ name: 'NodeExpression' })

const $props = defineProps({
  node: {
    type: Object as PropType<BaseNode>,
    required: true,
  },
})
const doEmit = defineEmits(['update:node'])
const vModelNode = computed<BaseNode>({
  get: () => $props.node,
  set: val => doEmit('update:node', val),
})

// 条件
const conditionTypeOptions = [
  { label: '默认', value: 'default' },
  { label: '条件表达式', value: 'condition' },
]

const conditionType = computed({
  get: () => {
    if (($props.node as any).$parent!.$default === vModelNode.value) {
      return 'default'
    }
    return 'condition'
  },
  set: val => updateConditionNode(val),
})

function updateConditionNode(type) {
  if (type === 'default') {
    (vModelNode as any).expression = ''
    return ($props.node as any).$parent!.$default = vModelNode.value
  }
  if (type === 'condition') {
    return (vModelNode as any).expression = ''
  }
}
</script>

<template>
  <a-collapse-item key="UserTaskMultiInstance">
    <template #header>
      <CornerRightDown :size="16" />
      条件配置
    </template>

    <EditItem label="条件类型">
      <validate-select v-model="conditionType" :options="conditionTypeOptions" />
    </EditItem>

    <EditItem v-if="conditionType === 'condition'" label="表达式">
      <validate-input v-model="(vModelNode as ExpressionNode).expression" />
    </EditItem>
  </a-collapse-item>
</template>
